<template>
  <div class="departments-container">
    <div class="app-container">
      <!-- 卡片 -->
      <el-card class="card">
        <!-- 头部 -->
        <el-tabs v-model="activeName" class="tab">
          <el-tab-pane label="组织架构" name="first"></el-tab-pane>
        </el-tabs>
        <!-- 树状内容 -->
        <div class="mybox">
          <!-- 头部 -->
          <treetools :item="headData" class="tree-head" @addDepartments='addDepartments'></treetools>
          <!-- 内容 -->
          <el-tree default-expand-all :data="data">
            <treetools
              :item="data"
              slot-scope="{ data }"
              class="tree-content"
              @resData='getDeptDate'
              @addDepartments='addDepartments'
              @editDepartments='editDepartments'
            ></treetools>
          </el-tree>
        </div>
      </el-card>
      <diolog 
      ref="myDiolog"
      @resData='getDeptDate'
      :dialogShow.sync='dialogShow'
      :id='currentId'
      
      ></diolog>
    </div>
  </div>
</template>

<script>
import { getDepartments } from '@/api/departments'
export default {
  name: 'departments',
  data () {
    return {
      activeName: 'first',
      data: [],
      headData: {
        // label:'人力资源管理',
        // isHead:true
      },
      dialogShow:false,
      currentId:''
    }
  },
  methods: {
    //将返回的数据变成树状结构
    turnData (arr, pid) {
      let res = []
      arr.forEach(item => {
        if (item.pid == pid) {
          const son = this.turnData(arr, item.id)
          if (son.length != 0) {
            item.children = son
          }
          res.push(item)
        }
      })
      return res
    },
    async getDeptDate () {
      let res = await getDepartments()
      console.log(res)
      this.data = this.turnData(res.data.depts, '')
      this.headData = res.data.depts[0]
      this.headData.manager = '负责人'
      this.headData.isHead = true
    },
    // closeDialog(){
    //   this.dialogShow = false
    // },
    addDepartments(id){
      this.dialogShow = true
      this.currentId = id
    },
    //编辑部门
    editDepartments(id){
      this.$refs.myDiolog.editDepartments(id)
      console.log(this.$refs.myDiolog.form);
      this.dialogShow = true
    }
  },
  created () {
    this.getDeptDate()
  },
  components: {
    treetools: () => import('./tree-tools.vue'),
    diolog:()=>import('./dialog.vue')
  }
}
</script>

<style lang="scss">
.departments-container {
  .app-container {
    .card {
      padding: 20px 40px;
      .mybox {
        padding: 20px 100px;
        width: 1400px;
        .right-col {
          .el-dropdown-link {
            margin-left: 20px;
          }
        }
        .tree-head {
          border-bottom: 1px solid #ccc;
          line-height: 50px;
        }
        .tree-content {
          width: 100%;
        }
      }
    }
  }
}
</style>
